<template>
    <!-- 字段绑定 -->
    <div class="field-bind">
        <!-- API 配置 -->
        <h3 class="field-bind-title">API 配置</h3>
        <div class="button">
            <el-button type="primary" @click.stop="setApi()">添加Api</el-button>
        </div>
        <div class="option-data">
            <li v-for="(item, index) in reportData.Api.options" :key="index">
                <div class="li-item">
                    <span class="label">接口使用：</span>
                    <el-switch v-model="item.disabled" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                </div>
                <div class="li-item">
                    <span class="label">API地址：</span>
                    <span class="text">/maintain</span>
                    <el-tooltip effect="dark" placement="top">
                        <div slot="content">
                            Api 前缀： "协议IP:HOST/maintain"
                        </div>
                        <i class="question el-icon-question"></i>
                    </el-tooltip>
                    <el-input v-model="item.api" type="textarea" :rows="2" placeholder="API接口， 如： /system/into/list，配置参数后会自动拼接。"></el-input>
                </div>
                <div class="li-item">
                    <span class="label">请求方式：</span>
                    <el-radio-group v-model="item.method" size="mini">
                        <el-radio-button label="get">Get</el-radio-button>
                        <el-radio-button label="post">Post</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="li-item">
                    <span class="label">数据结构：</span>
                    <el-radio-group v-model="item.structure" size="mini">
                        <el-radio-button label="object">Object</el-radio-button>
                        <el-radio-button label="array">Array</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="li-item">
                    <span class="label">设置参数：</span>
                    <el-button type="primary" @click.stop="addParams(item, index)">设置</el-button>
                    <el-button type="primary" @click.stop="request(item)">发送请求</el-button>
                </div>
                <div class="li-item">
                    <span class="label">隐藏参数</span>
                    <el-switch v-model="item.isReturnKey" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                </div>
                <div class="li-item">
                    <span class="label">当前参数：</span>
                    <span class="text" v-show="!item.params.length">暂无参数</span>
                    <el-tag v-for="(param, tagIndex) in item.params" :key="tagIndex" :type="param.disabled ? '' : 'info'">{{ param.field }}</el-tag>
                </div>
                <div class="li-item">
                    <span class="label">接口Key：</span>
                    <span class="text" v-show="!item.returnKey.length">暂无Key</span>
                    <el-tag v-show="!item.isReturnKey" v-for="(keys, keyIndex) in item.returnKey" :key="keyIndex" type="success" class="key-tag" @click.stop="copyKey(index, keys)">{{ keys }} <i class="el-icon-document-copy"></i></el-tag>
                </div>
                <el-button-group class="icon" v-if="index !== 0">
                    <el-button type="danger" icon="el-icon-delete" @click="deleteOptionData(index)"></el-button>
                </el-button-group>
            </li>
        </div>
        <!-- 设置参数 -->
        <set-params ref="setParams" @paramsSuccess="paramsSuccess"></set-params>
    </div>
</template>

<script>
import { setParams } from "./components/index";
import * as _ from 'lodash';
import { customInterface_get, customInterface_post } from "@/api/ReportDesign/ReportDesign.js";
import { warning, success, errorInfo } from "@/utils/errorInfo";
export default {
    name: "FieldBind",
    props: {
        reportData: {
            type: Object
        }
    },
    components: {
        setParams
    },
    data() {
        return {
        }
    },
    methods: {
        addParams(data, index) { // 设置参数
            this.$refs.setParams.open(_.cloneDeep(data.params), index);
        },
        paramsSuccess(data) { // 设置成功
            this.reportData.Api.options[data.index].params = _.cloneDeep(data.data) || [];
        },
        setApi() { // 添加API
            this.reportData.Api.options.push({
                disabled: false, // 是否启动
                api: "", // api 地址
                method: "get", // get/post 方法
                structure: "object", // 数据结构
                params: [], // 参数
                returnKey: [] // 返回值
            })
        },
        deleteOptionData(index) {
            this.reportData.Api.options.splice(index, 1);
        },
        request(data) { // 发送请求
            // 处理参数
            let params = {};
            data.params.forEach(item => {
                if (item.disabled) params[item.field] = item.testData;
            })
            if (data.method === 'get') { // get请求
                customInterface_get(data.api, params).then((res) => {
                    let resData = res?.data || null;
                    if (resData) {
                        success('接口调用成功');
                        if (data.structure === 'object') { // 集合操作
                            this.handleObject(resData[0], data);
                        } else if (data.structure === 'array') { // 数据操作
                            this.handleArray(resData, data);
                        }
                    } else errorInfo('接口数据错误');
                })
            } else if (data.method === 'post') { // post请求
                customInterface_post(data.api, params).then((res) => {
                    let resData = res?.data || null;
                    if (resData) {
                        success('接口调用成功');
                        if (data.structure === 'object') { // 集合操作
                            this.handleObject(resData[0], data);
                        } else if (data.structure === 'array') { // 数据操作
                            this.handleArray(resData, data);
                        }
                    } else errorInfo('接口数据错误');
                })
            }
        },
        handleObject(resData, data) { // 处理object
            data.returnKey = Object.keys(resData);
            data.testData = resData;
        },
        handleArray(resData, data) { // 处理数组
            if (resData.length > 0) data.returnKey = Object.keys(resData[0]);
            else warning('接口返回无数据注意检查');
        },
        copyKey(index, key) { // 复制
            let oInput = document.createElement('input');
            oInput.value = `#${index}:${key}#`;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand('Copy');
            oInput.style.display = 'none';
            document.body.removeChild(oInput);
            success('已经成功复制到剪切板', '操作');
        }
    }
}
</script>
